@import 'mixins';

.input {
	width: 100%;
	padding: 12px;
	border: 2px solid #dce6e5;
	margin-bottom: 20px;
	.placeholder(#5a8483);

	&:focus {
		outline: none;
	}
}

textarea.input {
	height: 125px;
	resize: vertical;
}

.checkbox, .checkbox-inline, .radio, .radio-inline {
	display: none;

	& + label {
		display: block;
		cursor: pointer;
		font-weight: normal;

		&:before {
			position: relative;
			margin-right: 10px;
			display: inline-block;
			width: 18px;
			height: 18px;
			border: 2px solid #dce6e5;
			text-align: center;
			content: '\f00c';
			font-family: FontAwesome;
			color: transparent;
			font-size: 10px;
			background-color: #fff;
		}
	}

	&:checked + label {
		&:before {
			color: #45706f;
			background-color:#ffc900;
			border-color:#ffc900;
		}
	}

	& + label:hover:before {
		border-color: #ffc900;
		background-color: #ffe171;
	}

	&.checkbox-inline + label, &.radio-inline + label {
		display: inline-block;
	}

	&.radio + label:before, &.radio-inline + label:before {
		border-radius: 99px;
	}
}

.switch, .switch-inline {
	display: none;

	& + label {
		display: block;
		width: 48px;
		height: 22px;
		border-radius: 99px;
		cursor: pointer;
		font-weight: normal;
		background-color: #fff;
		vertical-align: middle;
		border: 2px solid #aec6c6;
		.transition(all 400ms ease);

		&:before {
			margin-top: 1px;
			margin-left: 1px;
			display: inline-block;
			width: 16px;
			height: 16px;
			background-color: #aec6c6;
			content: '\f067';
			font-family: FontAwesome;
			font-size: 10px;
			color: #fff;
			text-align: center;
			vertical-align: top;
			line-height: 16px;
			border-radius: 99px;
		}
	}

	&:checked + label {
		background-color: #45706f;
		border-color: #325756;
		padding-left: 26px;

		&:before {
			color: #45706f;
			background-color: #ffc900;
			content: '\f00c';
		}
	}

	&.switch-inline + label {
		display: inline-block;
	}
}
